<template>
    <ul class="comment-container">
        <li class="commit-wrapper">
            <img class="commit-avatar" :src="articleContent.avatarUrl" alt="头像">
            <textarea cols="80" name="msg" rows="5" ref="commitOneContent" v-model="commitOneContent" placeholder="发一条友善的评论" class="commit-content"></textarea>
            <button class="commit-btn" @click="setOneCommit">发表评论</button>
        </li>
        <li class="comment-first-container"
            v-for="(first, index) in articleContent.oneComment"
            :key="first.id"
        >
            <img class="first-avatar" :src="first.userInfo && first.userInfo.avatarUrl" alt="头像">
            <ul class="comment-item-wrapper">
                <li class="comment-content">
                    <div class="first-title">{{first.userInfo && first.userInfo.username}}</div>
                    <div class="first-content">{{first.content}}</div>
                    <ul class="function-wrapper">
                        <li>{{first.createTime || '2021-5-2 10:10'}}</li>
                        <li @click="onFirstLike(index)"><span class="iconfont" ref="firstlike">&#xe674;</span>{{first.likeCount || 0}}</li>
                        <li @click="onFirstDisLike(index)"><span class="iconfont" ref="firstdislike">&#xe601;</span></li>
                        <li class="revert" @click="clickRevert(first.id, first,1)" v-show="isSelfShow(first.userId)">回复</li>
                        <li class="dots" v-show="isSelfShow(first.userId)">
                            <span class="iconfont">&#xe6ab;</span>
                            <span class="report">举报</span>
                        </li>
                    </ul>
                    <div class="commit-second-container"
                         v-for="(second, sindex) in first.twoComment"
                         :key="second.id"
                    >
                        <img class="second-avatar" :src="second.myUserInfo && second.myUserInfo.avatarUrl || second.replyUserInfo.avatarUrl" alt="头像">
                        <div class="comment-content">
                            <div class="second-content">
                               <span class="second-title">{{second.myUserInfo && second.myUserInfo.username || second.replyUserInfo.username}}</span>
                               <span class="second-content">{{second.content}}</span>
                            </div>
                            <ul class="function-wrapper">
                                <li>{{second.createTime || '2021-5-2 10:10'}}</li>
                                <li @click="onSecondLike(index, sindex)"><span class="iconfont" ref="secondlike">&#xe674;</span>{{second.likeCount}}</li>
                                <li @click="onSecondDisLike(index, sindex)"><span class="iconfont" ref="seconddisplylike">&#xe601;</span></li>
                                <li class="revert" v-show="isSelfShow(first.userId)" @click="clickRevert(first.id,second,2)">回复</li>
                                <li class="second-dots" v-show="isSelfShow(second.userId)">
                                    <span class="iconfont">&#xe6ab;</span>
                                    <span class="report">举报</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="commit-send-wrapper" v-show="currentRevert === first.id">
                    <img class="commit-avatar" :src="userInfo.avatarUrl" alt="">
                    <textarea cols="80" name="msg" rows="5" ref="commitOtherContent" v-model="commitOtherContent" :placeholder="commitRevert" class="commit-content"></textarea>
                    <button class="commit-btn" @click="sendOtherCommit(index)">发表评论</button>
                </li>
            </ul>
        </li>
    </ul>
</template>

<script>
    import { commentReply, replyArticle, replyTwoComment } from "../../api/blog";
    import {messageMixin} from "../../common/js/mixin";
    import { ERROR_NO } from "../../util/config";
    import { getNowDate } from "../../util/util";
    import { getUserInfo } from "../../common/js/cache";
    const className = 'click'
    export default {
        mixins: [messageMixin],
        props: {
            articleContent: {
                type: Object,
                default: () => {}
            },
            articleId: {
                type: String,
                default: ''
            }
        },
        data () {
            return {
                commitOneContent: '',
                commitOtherContent: '',
                currentRevert: '',
                commitRevert: '',
                commit: -1,   // 几级评论
                commitInfo: {},
                userInfo: {}
            }
        },
        methods: {
            // 一级评论点赞
            onFirstLike (index) {
                const firstlikeCount = this.$refs.firstlike[index].classList
                const firstlikeClassList = Array.from(firstlikeCount.values())
                const firstdislikeCount = this.$refs.firstdislike[index].classList
                const firstdislikeClassList = Array.from(firstdislikeCount.values())
                if (firstdislikeClassList.includes(className)) {
                    firstdislikeCount.remove(className)
                }
                if (firstlikeClassList.includes(className)) {
                    this.articleContent.oneComment[index].likeCount--
                    firstlikeCount.remove(className)
                } else {
                    firstlikeCount.add(className)
                    this.articleContent.oneComment[index].likeCount++
                }
            },
            // 一级评论踩
            onFirstDisLike (index) {
                const firstlikeCount = this.$refs.firstlike[index].classList
                const firstlikeClassList = Array.from(firstlikeCount.values())
                const firstdislikeCount = this.$refs.firstdislike[index].classList
                const firstdislikeClassList = Array.from(firstdislikeCount.values())
                if (firstlikeClassList.includes(className)) {
                    firstlikeCount.remove(className)
                    this.articleContent.oneComment[index].likeCount--
                }
                if (firstdislikeClassList.includes(className)) {
                    firstdislikeCount.remove(className)
                } else {
                    firstdislikeCount.add(className)
                }
            },
            // 二级评论点赞
            onSecondLike (index, sindex) {
                const secondlikeCount = this.$refs.secondlike[sindex+1].classList
                const secondlikeClassList = Array.from(secondlikeCount.values())
                const seconddisplylikeCount = this.$refs.seconddisplylike[sindex+1].classList
                const seconddislikeClassList = Array.from(seconddisplylikeCount.values())
                if (seconddislikeClassList.includes(className)) {
                    seconddisplylikeCount.remove(className)
                }
                if (secondlikeClassList.includes(className)) {
                    this.articleContent.oneComment[index].twoComment[sindex].likeCount--
                    secondlikeCount.remove(className)
                } else {
                    secondlikeCount.add(className)
                    this.articleContent.oneComment[index].twoComment[sindex].likeCount++
                }
            },
            // 二级评论踩
            onSecondDisLike (index, sindex) {
                const secondlikeCount = this.$refs.secondlike[sindex+1].classList
                const secondlikeClassList = Array.from(secondlikeCount.values())
                const seconddisplylikeCount = this.$refs.seconddisplylike[sindex+1].classList
                const seconddislikeClassList = Array.from(seconddisplylikeCount.values())
                if (secondlikeClassList.includes(className)) {
                    this.articleContent.oneComment[index].twoComment[sindex].likeCount--
                    secondlikeCount.remove(className)
                }
                if (seconddislikeClassList.includes(className)) {
                    seconddisplylikeCount.remove(className)
                } else {
                    seconddisplylikeCount.add(className)
                }
            },
            // 点击回复
            clickRevert (id, info, commit) {
                info.userInfo || (info.userInfo = {})
                if (this.currentRevert !== id) {
                    this.currentRevert = id
                }
                this.commitRevert = `回复 @${info.userInfo.username} ：`
                this.commit = commit
                this.commitInfo = info
            },
            isSelfShow (userId) {
                return userId !== this.userInfo.id
            },
            // 发送一级评论
            setOneCommit() {
                const commitOneContent = this.$refs.commitOneContent
                if (!this.commitOneContent) {
                    this._messge({
                        title: '提示',
                        message: '评论不能为空',
                        type: 'error'
                    })
                    commitOneContent.classList.add('commit-content-error')
                    return
                }
                this._replyArticle(this.articleId, this.commitOneContent)
            },
            // 发送二级评论或三级评论
            sendOtherCommit (index) {
                const commitOtherContent = this.$refs.commitOtherContent[index]
                if (!this.commitOtherContent) {
                    this._messge({
                        title: '提示',
                        message: '评论不能为空',
                        type: 'error'
                    })
                    commitOtherContent.classList.add('commit-content-error')
                    return
                }
                if (this.commit === 1) {
                    this._commentReply(this.commitInfo.id, this.commitOtherContent, index)
                } else {
                    console.log(this.commitInfo)
                    this._replyTwoComment(this.commitInfo.id, this.commitOtherContent, this.commitInfo.toUid, index)
                }
            },
            _replyArticle(id, content) {
                replyArticle(id, content).then(res => {
                    if (res.code === ERROR_NO) {
                        this.articleContent.oneComment.unshift({
                            content: this.commitOneContent,
                            createTime: getNowDate('time'),
                            dislikeCount: 0,
                            id: 0,
                            twoComment: [],
                            likeCount: 0,
                            userId: this.userInfo.id,
                            userInfo: this.userInfo
                        })
                        this.commitOneContent = ''
                        this._messge({
                            message: res.message
                        })
                    }
                })
            },
            _commentReply (id, commit, index) {
                commentReply(id, commit).then(res => {
                    if (res.code === ERROR_NO) {
                        this.articleContent.oneComment[index].twoComment.push({
                            content: this.commitOtherContent,
                            createTime: getNowDate('time'),
                            dislikeCount: 0,
                            fromUid: 0,
                            id: this.userInfo.id,
                            likeCount: 0,
                            myUserInfo: this.userInfo,
                            replyUserInfo: {},
                            toUid: this.articleContent.oneComment[index].twoComment.length
                        })
                        this.commitOtherContent = ''
                        this._messge({
                            message: res.message
                        })
                    }
                })
            },
            _replyTwoComment (id, commit, toUid, index) {
                replyTwoComment(id, commit, toUid).then(res => {
                    if (res.code === ERROR_NO) {
                        this.articleContent.oneComment[index].twoComment.push({
                            content: this.commitOtherContent,
                            createTime: getNowDate('time'),
                            dislikeCount: 0,
                            fromUid: 0,
                            id: this.userInfo.id,
                            likeCount: 0,
                            myUserInfo: this.userInfo,
                            replyUserInfo: {},
                            toUid: toUid
                        })
                        this.commitOtherContent = ''
                        this._messge({
                            message: res.message
                        })
                    }
                })
            }
        },
        created () {
            this.userInfo = getUserInfo()
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
   .comment-container {
       width: 100%;
       padding: 28px 20px 20px 40px;
       box-sizing: border-box;
       line-height: 20px;
       border: 1px solid $border-color;
       user-select: text;
       .commit-wrapper {
           display: flex;
           width: 100%;
           align-items: center;
           margin-bottom: 18px;
           .commit-avatar {
               width: 64px;
               height: 64px;
               border-radius: 50%;
           }
           .commit-content {
               margin: 0 10px 0 20px;
               font-size: 12px;
               display: inline-block;
               box-sizing: border-box;
               background-color: #f4f5f7;
               border: 1px solid #e5e9ef;
               overflow: auto;
               border-radius: 4px;
               color: #555;
               width: 100%;
               height: 65px;
               transition: 0s;
               padding: 5px 10px;
               line-height: normal;
               outline: none;
               resize: none;
               &:hover, &:focus {
                   background-color:#fff;
                   border-color: #00a1d6;
               }
           }
           .commit-btn {
               width: 56px;
               height: 64px;
               padding: 4px 15px;
               font-size: 14px;
               color: #fff;
               border-radius: 4px;
               text-align: center;
               min-width: 60px;
               vertical-align: top;
               cursor: pointer;
               background-color: #00a1d6;
               border: 1px solid #00a1d6;
               transition: 0.1s;
               user-select: none;
               outline: none;
               &:hover {
                   background-color: #00b5e5;
                   border-color: #00b5e5;
               }
           }
       }
       .comment-first-container {
          width: 100%;
          margin-right: 0;
          display: flex;
           & + .comment-first-container {
               margin-top: 8px;
           }
           .first-avatar {
               width: 64px;
               height: 64px;
               border-radius: 50%;
           }
           .comment-item-wrapper {
               width: 100%;
               display: flex;
               flex-direction: column;
               margin-left: 16px;
               .first-title {
                   font-size: 15px;
                   line-height: 23px;
                   color: #FC5531;
               }
               .first-content {
                   font-size: 14px;
                   line-height: 21px;
               }
               .function-wrapper {
                   display: flex;
                   line-height: 20px;
                   color: rgb(159, 159, 159);
                   font-size: 13px;
                   li + li {
                       margin-left: 18px;
                       cursor: pointer;
                   }
                   .iconfont {
                       margin-right: 4px;
                       &:hover {
                           color: $comment-font;
                       }
                   }
                   .revert {
                       color: $revert-font;
                       &:hover {
                           color: $revert-hover-font;
                       }
                   }
                   .dots {
                       position: relative;
                       margin-right: 40px;
                       margin-left: auto;
                       &:hover > .report {
                           opacity: 1;
                           transform: scale(1);
                       }
                   }
               }
               .commit-send-wrapper {
                   display: flex;
                   width: 100%;
                   align-items: center;
                   margin: 18px 0;
                   .commit-avatar {
                       width: 42px;
                       height: 42px;
                       border-radius: 50%;
                   }
                   .commit-content {
                       margin: 0 20px 0 30px;
                       font-size: 12px;
                       display: inline-block;
                       box-sizing: border-box;
                       background-color: #f4f5f7;
                       border: 1px solid #e5e9ef;
                       overflow: auto;
                       border-radius: 4px;
                       color: #555;
                       width: 100%;
                       height: 65px;
                       transition: 0s;
                       padding: 5px 10px;
                       line-height: normal;
                       outline: none;
                       resize: none;
                       &:hover, &:focus {
                           background-color:#fff;
                           border-color: #00a1d6;
                       }
                   }
                   .commit-btn {
                       width: 56px;
                       height: 64px;
                       padding: 4px 15px;
                       font-size: 14px;
                       color: #fff;
                       border-radius: 4px;
                       text-align: center;
                       min-width: 60px;
                       vertical-align: top;
                       cursor: pointer;
                       background-color: #00a1d6;
                       border: 1px solid #00a1d6;
                       transition: 0.1s;
                       user-select: none;
                       outline: none;
                       &:hover {
                           background-color: #00b5e5;
                           border-color: #00b5e5;
                           & ~ .commit-content {
                               background-color:#fff;
                               border-color: #00a1d6;
                           }
                       }
                   }
               }
           }
       }
       .commit-second-container {
           width: 100%;
           display: flex;
           margin-top: 16px;
           .second-avatar {
               width: 42px;
               height: 42px;
               border-radius: 50%;
           }
           .comment-content {
               width: 100%;
               margin-left: 8px;
               .second-content {
                   padding-right: 60px;
                   box-sizing: border-box;
                   .second-title {
                       display: inline-block;
                       float: left;
                       font-size: 15px;
                       line-height: 23px;
                       color: #FC5531;
                   }
                   .second-content {
                       margin-left: 16px;
                       font-size: 14px;
                       line-height: 24px;
                   }
               }
               .function-wrapper {
                   width: 100%;
                   .second-dots {
                       display: none;
                       position: relative;
                       margin-left: auto !important;
                       margin-right: 60px;
                   }
                   &:hover {
                       & > .second-dots {
                           display: block;
                           &:hover > .report {
                               opacity: 1;
                               transform: scale(1);
                           }
                       }
                   }
               }
           }
       }
   }
    .click {
        font-size: 18px;
        color: $comment-font;
    }
   .report {
       position: absolute;
       top: 18px;
       right: 18px;
       padding: 10px 15px;
       box-sizing: border-box;
       background: #fff;
       white-space: nowrap;
       box-shadow: 0 0 5px rgba(0, 0, 0, .2);
       border-radius: 4px;
       color: #222;
       font-size: 14px;
       opacity: 0;
       transform: scale(0);
       transform-origin: right top;
       transition: all 200ms;
       &:hover {
           background: $revert-hover-font;
           color: #fff;
       }
    }
    .commit-content-error {
        background-color: #fff !important;
        border-color: #e40c0c !important;
    }
</style>
